<template>
  <div style="overflow: hidden;width: 350px">
     <div style="width: 1050px;">
       <div style="width: 350px;float: left;" >
<!--         走马灯-->
         <el-carousel indicator-position="outside" :key="datalist.length" height="156px" ref="myres">
           <el-carousel-item  v-for="da in datalist" :key="da.bannerId">
             <img :src="da.imgUrl"/>
           </el-carousel-item>
         </el-carousel>

<!--         <router-view/> -->
       </div>
     </div>
<!--<router-view/>-->
    <Sideber :class="isFixed?'fixed':''"></Sideber>
  </div>

</template>

<script>
import axios from "axios";
import Sideber from "./Sideber";
export default {
  name: "Narber",
  components: {Sideber},
  data(){
    return{
      datalist:[],
      isFixed: false

    }
  },

  mounted() {
    // console.log( this.$route.params.id)
    // this.$route.params.id;

    axios({
      url:"https://m.maizuo.com/gateway?type=2&cityId=110100&k=1782729",
      headers:{
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16200862756251397913772033","bc":"110100"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res=>{
      console.log(res.data);
      this.datalist = res.data.data;
    })
    window.onscroll = this.handleScroll;
  },
  beforeDestroy() {
    window.onscroll =null ;
  },
  methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 600 / 1920 * this.screenWidth;
    },
    handleScroll(){

      // console.log(document.documentElement.scrollTop,this.$refs.myres.$el.offsetHeight)
      if(document.documentElement.scrollTop>this.$refs.myres.$el.offsetHeight){

        // console.log("fixed")
        this.isFixed=true
      }else {
        // console.log("unfixed")
        this.isFixed=false
      }

    }
  },
}
</script>

<style scoped>
/*走马灯*/
img{
  max-width: 100%;
  max-height: 100%;
}
.isFixed{
  position: fixed;
  overflow: hidden;
  top: 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
